UniApp 踩坑记录

UniApp 踩坑记录

uni.pageScroolTo 动画结束后还是会触发 onPageScroll事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
uni.pageScrollTo({
	selector: '#target'
	duration: 150,
})

const lastScrollTop = ref(0)
let isScrollStop = false
onPageScroll(e => {  
    isScrollStop = true
    if (lastScrollTop.value >= e.scrollTop)  {
	    isScrollStop = true
	    // 这里处理手动pageScrollTo后的逻辑
    }
    lastScrollTop.value = e.scrollTop;
})

uni-popup 会在赋值新数据的适合,自动消失,只留下遮罩

https://ask.dcloud.net.cn/question/154323

我这里实测是发现如果 uni-popup 组件紧挨着上面的一个组件，上面的组件由于数据变动发生了变化，就会导致紧挨着的下面的 uni-popup 组件出现这种内容消失，只剩遮罩层的问题。

实在是太奇葩了。

重现方法，注意看下面的代码 uni-popup 紧挨着上面的 view，页面加载后立即弹出 uni-popup，两秒后上面的 view 可见性发生了变化，然后 uni-popup 就出现了这个问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
    <view>
        <view class="i-will-change" v-if="somethingDisplay">Yes</view>
        <uni-popup ref="myPopup">Hello World</uni-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                somethingDisplay: false
            };
        },
        onLoad() {
            this.$nextTick(() => {
                this.$refs.myPopup.open();
                setTimeout(() => {
                    this.somethingDisplay = true;
                }, 2000);
            });
        }
    };
</script>

解决的办法也很简单，就是 uni-popup 不要挨着会变化的元素，比如把 view.i-will-change 再套进一个 view 里就行了。

这个问题实在是太太奇葩了。

2023-03-20 11:37 分享

scss 变量无法编译

1
2
3
4
5
6
7
$page-bottom-paddingY: 5;
$page-bottom-btn-height: 40;

.bottom-holder {
    padding: #{$page-bottom-paddingY}px;
    height: #{$page-bottom-btn-height}px;
}

改成

1
2
3
4
5
6
7
$page-bottom-paddingY: 5px;
$page-bottom-btn-height: 40px;

.bottom-holder {
    padding: $page-bottom-paddingY;
    height: $page-bottom-btn-height;
}

或者

1
2
3
4
5
6
7
8
$page-bottom-paddingY: 5;
$page-bottom-btn-height: 40;

.bottom-holder {
    padding: #{$page-bottom-paddingY}px;
    height: #{$page-bottom-btn-height}px;
}